import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { CellGroup, Tab, Tabs, Field } from '@antmjs/vantui'

import WowSelect from '../../components/WowSelect'
import CompleteModal from './CompleteModal'

import './index.less'

const BaseInfo = () => {

  const [tabs, setTabs] = useState([])
  const [show, setShow] = useState(false)
  const [modalIsSuccess, setModalIsSuccess] = useState(false)
  const [roleData, setRoleData] = useState({
    name: '',
    serverName: '',
    equipLevel: '',
  })

  const setRoleObj = (key, value) => {
    setRoleData({
      ...roleData,
      [key]: value
    })
  }

  const goHome = () => {
    Taro.switchTab({
      url: '/pages/index/index'
    })
  }

  const showModal = () => {
    setShow(true)
  }

  const submitBase = () => {
    showModal()
  }

  const submitRole = async () => {
    const { data } = await Taro.$http.post('/api/gy/getGameUserAdd', {
      name: `${roleData.name}-${roleData.serverName}`,
      equipLevel: roleData.equipLevel
    })
    setModalIsSuccess(data.code === 0)
    if (data.code !== 0) return Taro.$showMsg()
    showModal()
  }

  useEffect(() => {
    setTabs(['基本信息', '角色信息'])
  }, [])

  return (
    <View>
      <View className='header'>
        <View className='header-bg' />
      </View>
      <Tabs sticky>
        {
          tabs.map((e, i) => (
            <Tab key={i} title={e}>
              {
                e === '基本信息' ?
                  (
                    <View className='tab-box'>
                      <CellGroup inset>
                        <Field
                          placeholder='手机号'
                          border={false}
                        />
                        <WowSelect placeholder='微信群' cols={[{ name: '1群', value: 0 }]} />
                        <Field
                          placeholder='微信群昵称'
                          border={false}
                        />
                      </CellGroup>
                      <View className='btn-group'>
                        <View className='btn plain-btn' onClick={goHome}>返回首页</View>
                        <View className='btn fill-btn'>
                          <View className='btn-inner-box' onClick={submitBase}>点击提交</View>
                        </View>
                      </View>
                    </View>
                  ) :
                  (
                    <View className='tab-box'>
                      <CellGroup inset>
                        <Field
                          placeholder='角色名'
                          border={false}
                          onInput={({ detail }) => setRoleObj('name', detail)}
                        />
                        <Field
                          placeholder='角色服务器'
                          border={false}
                          onInput={({ detail }) => setRoleObj('serverName', detail)}
                        />
                        <Field
                          type='number'
                          placeholder='装备等级'
                          border={false}
                          onInput={({ detail }) => setRoleObj('equipLevel', detail)}
                        />
                        {/* <WowSelect placeholder="职业" cols={roles} /> */}
                      </CellGroup>
                      <View className='btn-group'>
                        <View className='btn plain-btn' onClick={goHome}>返回首页</View>
                        <View className='btn fill-btn'>
                          <View className='btn-inner-box' onClick={submitRole}>点击提交</View>
                        </View>
                      </View>
                    </View>
                  )
              }
            </Tab>
          ))
        }
      </Tabs>
      <CompleteModal success={modalIsSuccess} close={() => setShow(false)} show={show} />
    </View>
  )
}

export default BaseInfo